1.1 YAML Header

YAML(YAML Ain’t Markup Language, 야믈)은 제목, 출력물 형태, css 스타일 등을 정의하는 부분입니다. 최상단에 위치하며 Rmarkdown에서는 위아래 — 를 통해 정의됩니다. 각각의 정의는 콜론(:)을 통해 구분하며, 하부 내용은 엔터 후 띄어쓰기 2칸을 입력합니다.

---
title: "R Markdown"
author: "이현열"
date: "2022-10-25" 
output:
  html_document: 
    toc: yes
    toc_float: yes
    toc_depth: 2
    number_sections: yes
---

• title: 제목
• author: 저자
• date: 날짜
• output: 출력 형태
• toc: table of content. 목차 생성 여부
• toc_float: 목차가 유동적으로 움직일지 여부
• toc_depth: 목차의 depth
• number_section: 제목에 숫자를 부여할지 여부

또한 [Option 마크 → Output Options]를 통해서도 쉽게 YAML을 수정할 수 있습니다.

HTML 외에도 YAML을 변경하여 다양한 형태의 문서를 만들 수 있습니다.

• https://rmarkdown.rstudio.com/formats.html

1.2 Code Chunk

Rmarkdown의 가장 강력한 기능은 코드의 결과물을 문서 내에 녹여낼 수 있다는 점입니다. 코드 청크는 이러한 코드를 입력하는 부분이며, {r}과 가운데 코드를 입력하면 해당 코드가 실행된다. R 대신 Python이나 기타 언어도 설정이 가능합니다. 단축키는 ctrl + alt + I (mac: Cmd + Option+ i) 입니다.

```{r pressure, echo=FALSE}
plot(pressure)
```

코드 청크 우측 상단의 초록색 삼각형(▶)을 클릭하면 해당 부분의 코드가 실행됩니다. 위 코드를 실행하면 다음과 같이 출력됩니다.

이중 r 다음의 pressure는 해당 코드청크의 라벨이며 생략이 가능합니다. echo=FALSE는 옵션 부분에 해당하며, 이러한 옵션을 통해 코드와 결과물에 대한 다양한 셋팅을 할 수 있습니다. 대표적으로 사용되는 것은 다음과 같습니다.

• eval: 코드를 실행할 지 여부
• include: 코드 및 결과물을 문서에 포함할지 여부
• echo: 문서에 코드를 보여줄 지 여부
• error/message/warning: 오류/메세지/경고 여부를 문서에 출력할 지 여부
• fig.align: 그림의 정렬(left, right, center)
• fig.height, fig.width: 그림의 가로세로 길이

이 외에도 다양한 옵션에 대한 사항은 아래 사이트에서 확인할 수 있습니다.

• https://yihui.org/knitr/options/

1.3 Markdown Text

마크다운 문법을 이용해 텍스트를 입력하는 곳이며, Latex를 이용해 수식도 입력이 가능합니다다. 마크다운의 일반적인 사용법은 아래 페이지에서 확인할 수 있습니다.

https://www.markdownguide.org/basic-syntax/

상단의 [Visual]을 클릭하면 텍스트가 어떤 형태로 출력되는지 미리 확인할 수 있을 뿐만 아니라, 손쉽게 편집도 가능합니다.

회귀식은 일반적으로 $y=ax+b$이며 다중회귀식은 다음과 같다.

$$ y = a1x1 + a2x2 + \dots + b$$

\begin{equation} 
\begin{split}
\hat \beta_{OLS} & = (X'X)^{-1}X'Y \\
&= (X'X)^{-1}X'(X\beta+\epsilon) \\
&= (X'X)^{-1}X'X\beta + (X'X)^{-1}X'\epsilon \\
&= \beta + (X'X)^{-1}X'\epsilon 
\end{split}
\end{equation}

<div style="background-color:#F7F7F7;padding: 5px">
이 부분의 배경은 회색으로 표현됩니다.
</div>

::: {style="background-color:#F7F7F7;padding: 5px"}
이 부분의 배경은 회색으로 표현됩니다.
:::

library(knitr)
library(kableExtra)

mtcars[1:5, ] %>%
  kable() %>%
  kable_styling(bootstrap_options = c("striped", "hover", "condensed", "responsive"))

library(DT)

mtcars %>%
  datatable(escape = FALSE,
            rownames= FALSE,
            extensions = 'Buttons',
            options = list(pageLength = 10,
                           dom = 'Bfrtip',
                           buttons = c('copy', 'csv', 'excel', 'pdf')
                           ))

library(ggplot2)
library(magrittr)

diamonds %>%
  ggplot(aes(x = carat, y = price)) +
  geom_point()

library(ggplot2)
library(magrittr)
library(plotly)

(diamonds %>%
  ggplot(aes(x = carat, y = price)) +
  geom_point()
  ) %>%
  ggplotly()

![](이미지주소)

2.1 YAML

기본적인 사항은 Rmarkdown과 비슷합니다.

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

• title: 화면 상단의 제목에 해당하는 부분입니다.
• orientation: 화면분할 기준을 행으로 할 것인지, 열로 할 것인지를 선택한다. 행으로 하고자 할 경우 columns 대신 rows를 입력하면 됩니다.
• vertical_layout: flexdashboard는 기본적으로 차트나 표의 크기를 조정해 한 화면 내에 모든 대시보드가 보이도록 합니다. 만약 대시보드가 길어져 스크롤이 필요할 경우 fill이 아닌 scroll을 입력하면 스크롤 기능이 생성됩니다.

2.2 레이아웃

먼저 샘플 코드를 살펴봅시다.

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}

```

Column {data-width=350}
-----------------------------------------------------------------------

### Chart B

```{r}

```

### Chart C

```{r}

```

Column 을 통해 레이아웃에서 새로운 컬럼을 생성합니다. 예제에서는 컬럼 후 —-- 로 레이아웃을 정의했지만 h2(##)를 통해서도 정의가 가능합니다. flexdashboard에서는 본문의 크기를 가로 세로 1000으로 가정하며, {data-width=650}를 통해 넓이가 650인 레이아웃이 생성됩니다. h3(###) 후 이름을 입력하면 해당 이름의 차트가 생성됩니다(Chart A).

그 후 새로운 Column 을 통해 넓이가 350인 레이아웃이 생성되며, 새롭게 열 혹은 행을 나눠주기 전까지는 해당 레이아웃 내에서 차트를 나눕니다. 두번째 열에서는 Chart B와 Chart C가 분할된 것을 확인할 수 있습니다.

2.3 탭셋(Tabeset) 만들기

대시보드에 더욱 많은 내용을 넣고자 할때 탭셋을 이용하면 매우 효율적으로 표현할 수 있습니다. 레이아웃 부분에 탭셋 정의를 추가해줍니다.

## Column {data-width=650}

### Chart A

```{r}

```

## Column {.tabset data-width=350}

### Chart B

```{r}

```

### Chart C

```{r}

```

Chart B와 Chart C가 탭셋으로 분리되어 공간을 더욱 넓게 사용할 수 있습니다.

2.4 사이드바

각종 텍스트 혹은 입력값을 넣을 위젯은 좌측의 사이드바에 넣는 것이 일반적입니다. {.sidebar}로 정의해주면 사이드바가 생성됩니다.

## Column {.sidebar}

<br> 
```{r}
cat('이곳에 텍스트 혹은 위젯을 입력하세요')
```

    
## Column {data-width=650}

### Chart A

```{r}

```

## Column {.tabset data-width=350}

### Chart B

```{r}

```

### Chart C

```{r}

```

2.5 페이지 만들기

여러 페이지를 만들고자 할 경우 h1(#)을 이용하면 됩니다.

# Page 1

## Column {.sidebar}

<br> 
```{r}
cat('이곳에 텍스트 혹은 위젯을 입력하세요')
```

## Column {data-width=650}

### Chart A

```{r}

```

## Column {.tabset data-width=350}

### Chart B

```{r}

```

### Chart C

```{r}

```

# Page 2

## Column

### Chart D

### Chart E

상단 메뉴에 [Page 1]과 [Page 2] 탭이 생성되어 각각의 페이지가 만들어집니다.

2.6 대시보드 작성하기

원하는 결과물에 맞춰 레이아웃을 구성했다면, 이제 각각의 차트에 표현하고자 하는 내용을 입력해야 합니다. 일반적으로 위젯, 게이지, 표, 그림이 사용됩니다다. 아래는 실제로 사용되는 flexdashboard를 이용한 대시보드입니다.

https://blog.codecentric.de/explore-predictive-maintenance-flexdashboard

위에서 배운 내용을 이용하면 이러한 대시보드를 매우 쉽게 만들 수 있습니다. 예제로써 팔머 펭귄(palmerpenguins) 데이터를 이용해 비슷한 대시보드를 만들어 보도록 하겠습니다.

---
title: "펭귄 데이터 분석"

output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r}
library(shiny)
library(flexdashboard)
library(ggplot2)
library(magrittr)
library(plotly)
library(dplyr)
library(palmerpenguins)
library(DT)
library(stringr)
```

# Dashboard {data-icon="ion-android-clipboard"}

## Column {.sidebar data-width=250}

<h3> **Dashboard** </h3>

이곳은 **대시보드**만들기 샘플 페이지 입니다.

펭귄 종류는 다음과 같습니다.

```{r}
species = penguins %>% distinct(species) %>% pull()
selectInput("species", label = h3("species"), 
    choices = species)
```

<hr>

```{r}
span(img(src = "www/penguins.png", width = 230))
```

## Column {data-width=330}

### 펭귄 데이터

해당 데이터는 팔머(Palmer) 펭귄의 3가지 종류에 대한 데이터입니다.

- **species**: 펭귄 종으로써 아델리(Adelie), 젠투(Gentoo), 턱끈(Chinstrap) 펭귄 3종류가 있습니다.
- **island**: 남극의 펭귄의 서식지로써 Torgersen, Biscoe, Dream가 있습니다.
- **bill_length_mm**: 부리의 길이에 해당합니다.
- **bill_depth_mm**: 부리의 위아래 두께에 해당합니다.
- **flipper_length_mm**: 펭귄의 날개 길이에 해당합니다.
- **body_mass_g**: 몸무게에 해당합니다.
- **sex**: 성별에 해당합니다.
- **year**: 조사년도에 해당합니다.

<hr>

```{r}
penguins %>%
  set_colnames(str_replace_all(colnames(penguins), "_", " ")) %>%
    datatable(rownames= FALSE,
            escape = FALSE,
            extensions = 'Buttons',
            options = list(pageLength = 10,
                           dom = 'pBfrti',
                           buttons = c('copy', 'csv', 'excel', 'pdf')
                           ))
```

## Column {data-width=270}

### 펭귄별 차이 (부리길이)

```{r}
penguins %>%
  group_by(species) %>%
  summarize(bill_length_mm = median(bill_length_mm, na.rm = TRUE)) %>%
  ggplot(aes(x = species, y = bill_length_mm)) +
  geom_col()
```

### 펭귄별 차이(날개 및 무게)

```{r}
(penguins %>%
  ggplot(aes(x = flipper_length_mm, y = body_mass_g, color = species, shape = species))+
  geom_point(size = 4) +
  xlab('flipper length(mm)') + ylab('body mass(g)') +
  theme_bw()) %>%
  ggplotly()
```


## Column {data-width=150}

### Gauge

```{r}
b = 75

gauge(75, min = 0, max = 100, symbol = 'mm', gaugeSectors(
  success = c(80, 100), warning = c(20, 79), danger = c(0, 19)
))
```

### Box 1

```{r}
sales = 1500000
valueBox(format(sales, big.mark = ",", scientific = FALSE),
         icon = "ion-social-usd-outline",
         color = ifelse(sales >= 1000000, "primary", "warning"))
```

### Box 2

```{r}
growth = -0.0231
valueBox(paste(round(growth * 100, 2), '%'),
         icon = "ion-arrow-graph-up-right",
         color = ifelse(growth >= 0, "primary", "danger"))
```

### Box 3

```{r}
comments = 11
valueBox(comments, icon = "ion-chatboxes")
```

예제와 비슷한 대시보드가 완성되었습니다. 한 부분씩 코드를 살펴보도록 하겠습니다.

3.1 반응형(reactive) 앱에 대한 이해

샤이니의 가장 큰 장점은 반응형 앱을 구현할 수 있다는 것입니다. 즉 ui 부분에서 사용자가 입력한 값을 바탕으로 server에서 계산한 결과물을 다시 ui 부분에 출력할 수 있다는 점입니다. 이를 그림으로 나타내면 다음과 같습니다.

1. ui 부분에 input 값을 입력합니다.
2. server에 해당 input 값을 전송합니다.
3. 입력된 값을 토대로 output을 계산합니다.
4. ui에 output을 전송해 표현합니다.

위 과정을 앱으로 구현하면 다음과 같습니다.

library(shiny)

ui = fluidPage(
  
 # 1
  sliderInput(inputId = 'num',
              label = "Number of Data",
              min = 300,
              max = 100000,
              value = 300),
  
 # 4
  textOutput('simNumber'),
  plotOutput('distPlot')
  
)

server = function(input, output, session) {
  
  # 2
  output$simNumber = renderText({
    paste0('Number of Generation: ', input$num)
  })
  
  # 3
  output$distPlot = renderPlot({
    x = rnorm(input$num, mean = 0, sd = 1) 
    hist(x,
         breaks = input$num / 100,
         main = 'Histogram of Random Generation Number')
  })
  
}

shinyApp(ui, server)

※ ui 부분은 코드 마다 [,]를 붙이지만, server 부분은 그렇지 않습니다.

위 코드를 실행하면 다음과 같습니다.

이제 코드를 하나씩 뜯어보며 살펴봅시다.

1. 먼저 ui의 sliderInput() 함수를 통해 입력값을 받습니다. 이처럼 인풋에 해당하는 부분은 *Input() 함수를 통해 만들 수 있습니다. inputId은 해당 인풋의 이름에 해당하는 부분이며, label은 웹앱에 나타나는 글자입니다. min, max, value는 최소, 최대 및 디폴트 값에 해당하는 인자입니다.

2. 입력된 인풋값을 서버에 전송하면 이를 토대로 계산을 합니다. 먼저 input$num은 num이라는 input에 저장된 값입니다. paste0() 함수를 통해 [Number of Generation:] 이라는 글자와 합친 후, renderText() 함수를 통해 렌더링을 합니다. 이처럼 서버에서는 render*() 함수를 통해 원하는 아웃풋의 형태로 렌더링이 가능합니다. 그 후 해당 결과를 output의 simNumber에 저장한다. 렌더링이란 웹사이트 코드를 사용자가 웹 사이트를 방문할 때 보게 되는 대화형 페이지로 바꾸는 웹 개발에 사용되는 절차입니다.

3. distPlot도 마찬가지 입니다. 먼저 rnorm() 함수를 통해 평균이 0, 표준편차가 1인 정규분포에서 인풋값 만큼의 난수를 만듭니다. 그 후 hist() 함수를 통해 해당 값의 히스토그램을 그린 후, renderPlot() 함수를 통해 그림 형태로 렌더링을 합니다.

4. 다시 ui 부분에서는 textOutput() 함수와 plotOutput() 함수를 통해 렌더링된 글자 및 그림을 출력합니다. 이처럼 렌더링된 결과물을 ui부분에서 출력할 때는 *Output() 함수가 사용됩니다.

그러나 위의 예에서 input$num이 3번 쓰였습니다. 즉 동일한 데이터 요청 작업을 3번 하는 것이며, 이는 앱의 성능을 저하시킵니다. 따라서 동일한 데이터가 여러번 쓰일 경우 요청은 1번만 하고 이를 사용하는 것이 훨씬 효율적입니다.

library(shiny)

ui = fluidPage(
  
  sliderInput(inputId = 'num',
              label = "Number of Data",
              min = 300,
              max = 100000,
              value = 300),
  
  textOutput('simNumber'),
  plotOutput('distPlot')
  
)

server = function(input, output, session) {
  
  num = reactive({
    input$num
  })
  
  output$simNumber = renderText({
    paste0('Number of Generation: ', num()) 
  })
  
  output$distPlot = renderPlot({
    x = rnorm(num(), mean = 0, sd = 1) 
    hist(x,
         breaks = num() / 100,
         main = 'Histogram of Random Generation Number')
  })
  
}

shinyApp(ui, server)

reactive({}) 함수는 요청하여 받은 데이터를 캐시에 저장하는 역할을 합니다. 즉 num = reactive({input$num}) 부분을 통해 input$num 데이터를 num에 저장하고 이를 아래의 다른 코드들에 뿌려줍니다. 만일 ui 부분의 입력값인 input$num이 바뀔 경우 reactive() 함수는 이에 반응하여 num 변수에 해당 값을 저장합니다.

3.2 ui (user interface)

ui 부분은 프론트엔드, 즉 사용자가 보는 화면에 해당합니다. ui는 크게 서버로 넘길 input, 그리고 서버에서 계산된 결과를 출력하는 output 두가지 부분이 존재합니다.

checkboxGroupInput("checkGroup", label = h3("Checkbox group"), 
    choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
    selected = 1)

library(shiny)
library(shinyWidgets)

ui = fluidPage(
 checkboxGroupInput("checkGroup", label = "Default Widget", 
                     choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
                     selected = 1),  

  awesomeCheckboxGroup(
    inputId = "checkGroupWidgets",
    label = "shinyWidgets", 
    choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
    selected = 1
  )  
)

server <- function(input, output, session) {  
}

shinyApp(ui, server)

library(shiny)

ui = fluidPage(  
  plotOutput('table')  
)

server <- function(input, output, session) {  
  output$table = renderTable({
    mtcars
  })  
}

shinyApp(ui, server)

library(shiny)

ui = fluidPage(  
  tableOutput('table')  
)

server <- function(input, output, session) {  
  output$table = renderTable({
    mtcars
  })  
}

shinyApp(ui, server)

ui = fluidPage(
  textOutput('text1'),
  verbatimTextOutput('text2')
)

server = function(input, output, session) {
  output$text1 = renderText({ 
    "Hello World!"
  })

  output$text2 = renderPrint({ 
    "Hello World!"
  })
}

shinyApp(ui, server)

library(shiny)
library(DT)
library(magrittr)

ui = fluidPage(
  tableOutput('static'),
  tableOutput('knitr'),
  dataTableOutput('dynamic')
)

server = function(input, output, session) {
  output$static = renderTable({
    head(mtcars)
    })
  
  output$knitr = function() {
    mtcars %>% head() %>%
      knitr::kable() %>%
      kableExtra::kable_styling(bootstrap_options =
                                  c("striped", "hover", "condensed", "responsive")) 
    }
  
  output$dynamic = renderDataTable({
    head(mtcars) %>% datatable()
    })
}

shinyApp(ui, server)

library(shiny)
library(ggplot2)
library(magrittr)

ui = fluidPage(
  plotOutput('normal'),
  plotOutput('ggplot'),
  plotlyOutput('plotly')
)

server = function(input, output, session) {
  output$normal = renderPlot({
    plot(1:5)
  })
  
  output$ggplot = renderPlot({
   data.frame(x = 1:5, y = 1:5) %>%
      ggplot(aes(x = x, y = y)) +
      geom_point()
  })
  
   output$plotly = renderPlotly({
   (data.frame(x = 1:5, y = 1:5) %>%
      ggplot(aes(x = x, y = y)) +
      geom_point()) %>% ggplotly()
  })
}

shinyApp(ui, server)

3.3 레이아웃

페이지의 틀을 잡는 레이아웃 역시 코드를 통해 간단히 설정할 수 있습니다. 일반적으로 앱은 다음과 같은 레이아웃으로 구성됩니다.

이를 코드로 나타내면 다음과 같습니다.

library(shiny)

ui = fluidPage(
  
  titlePanel(
    "Title"
  ),
  
  sidebarLayout(
    
    sidebarPanel(
      sliderInput(inputId = 'num',
                  label = "Number of Data",
                  min = 300, max = 100000, value = 300)
    ),
    mainPanel(
      textOutput('simNumber')
    )
  )
)

server = function(input, output, session) {
  
  output$simNumber = renderText({
    paste0('Number of Generation: ', input$num)
  })
  
}

shinyApp(ui, server)

사이드바가 필요없을 경우 sidebarPanel()를 생략하면 됩니다.

본문에 해당하는 mainPanel 역시 레이아웃을 지정할 수 있습니다. 참고로 R shiny에서는 본문의 넓이를 12로 정의합니다.

library(shiny)

ui = fluidPage(
  
  titlePanel(
    "Title"
  ),
  
  sidebarLayout(
    sidebarPanel(
      sliderInput(inputId = 'num',
                  label = "Number of Data",
                  min = 300, max = 100000, value = 300)
    ),
    mainPanel(
      fluidRow(
        column(6, style = "background-color:red;", print('red')),
        column(6, style = "background-color:blue;", print('blue')), 
        hr(),
        column(8, style = "background-color:green;", print('green')), 
        column(4, style = "background-color:yellow;", print('yellow'))         
      )
    )
  )
)

server = function(input, output, session) {
  
}

shinyApp(ui, server)

이 외에도 샤이니 앱은 하나의 탭이 아니라 여러개의 탭을 만드는 것도 가능합니다.​ 이 경우 최상단에 fluidPage()가 아닌 navbarPage()를 사용합니다.

library(shiny)

ui = navbarPage(
    "Page title",   
    tabPanel("panel 1",
             sidebarLayout(
               sidebarPanel(
                 print('side')
             ),
             mainPanel(
               tabsetPanel(
                 id = "tabset",
                 tabPanel("panel 1", "one"),
                 tabPanel("panel 2", "two"),
                 tabPanel("panel 3", "three")
               )
               )
             )
             ),
    tabPanel("panel 2", "two"),
    tabPanel("panel 3", "three"),
    navbarMenu("subpanels", 
               tabPanel("panel 4a", "four-a"),
               tabPanel("panel 4b", "four-b"),
               tabPanel("panel 4c", "four-c")
               )
    )


server = function(input, output, session) {
  
}

shinyApp(ui, server)

페이지 레이아웃의 경우 완성하고자 하는 앱의 형태를 손으로 그려 놓고, 이에 맞게 만드는 것이 훨씬 효율적입니다다. 또한 레이아웃부터 잡아놓은 후 ui와 server 부분의 코드를 채워나가는 것이 개발을 할때 훨씬 편합니다. 레이아웃에 대해서는 아래 페이지에 자세히 설명되어 있습니다.

https://shiny.rstudio.com/articles/layout-guide.html

3.4 mtcars 예제

mtcars 데이터를 통해 실제 앱을 어떻게 만드는지 순서를 따라가보도록 하겠습니다. 먼저 cyl(실린더 수)에 따른 mpg(연비)와 wt(중량)의 관계를 보고자 합니다. 만일 cyl == 6인 데이터만 선택하고자 할 경우 코드는 다음과 같습니다.

mtcars %>%
  select(mpg, cyl, wt) %>%
  filter(cyl == 6)

##                 mpg cyl    wt
## Mazda RX4      21.0   6 2.620
## Mazda RX4 Wag  21.0   6 2.875
## Hornet 4 Drive 21.4   6 3.215
## Valiant        18.1   6 3.460
## Merc 280       19.2   6 3.440
## Merc 280C      17.8   6 3.440
## Ferrari Dino   19.7   6 2.770

만일 여러개를 기준으로 필터를 할 경우 코드는 다음과 같습니다.

mtcars %>%
    select(mpg, cyl, wt) %>%
    filter(cyl %in% c(4,6))

##                 mpg cyl    wt
## Mazda RX4      21.0   6 2.620
## Mazda RX4 Wag  21.0   6 2.875
## Datsun 710     22.8   4 2.320
## Hornet 4 Drive 21.4   6 3.215
## Valiant        18.1   6 3.460
## Merc 240D      24.4   4 3.190
## Merc 230       22.8   4 3.150
## Merc 280       19.2   6 3.440
## Merc 280C      17.8   6 3.440
## Fiat 128       32.4   4 2.200
## Honda Civic    30.4   4 1.615
## Toyota Corolla 33.9   4 1.835
## Toyota Corona  21.5   4 2.465
## Fiat X1-9      27.3   4 1.935
## Porsche 914-2  26.0   4 2.140
## Lotus Europa   30.4   4 1.513
## Ferrari Dino   19.7   6 2.770
## Volvo 142E     21.4   4 2.780

이 중 c(4,6) 내부의 숫자가 바뀜에 따라 데이터가 바뀐다고 유추할 수 있으므로, 이를 사이드바에 위젯으로 넣으면 됩니다.

또한 이를 점도표로 나타내는 코드는 다음과 같습니다.

mtcars %>%
  select(mpg, cyl, wt) %>%
  filter(cyl %in% c(4, 6)) %>%
  ggplot(aes(x = mpg, y = wt, color = factor(cyl))) +
  geom_point(size = 5)

위를 바탕으로 실런더를 선택하면 해당 테이블 및 그림을 표현하는 코드는 다음과 같습니다.

library(shiny)
library(DT)
library(ggplot2)
library(dplyr)
library(magrittr)

ui = fluidPage(
  
  titlePanel("mtcars"),
  sidebarLayout(
    
    sidebarPanel(
      checkboxGroupInput("cyl", label = '실린더를 선택하세요',
                     choices = list(4, 6, 8),
                     selected = 4)
      ),
    
    mainPanel(
      dataTableOutput('mtcars_table'),
      plotOutput('mtcars_plot')
    )
    )
)

server = function(input, output, session) {
  
  sel_mtcars = reactive({
    mtcars %>%
      select(mpg, cyl, wt) %>%
      filter(cyl %in% input$cyl)
  })
  
  output$mtcars_table = renderDataTable({
    
    sel_mtcars() %>%
      datatable()
  })
  
  output$mtcars_plot = renderPlot({
    
    sel_mtcars() %>%
      ggplot(aes(x = mpg, y = wt, color = factor(cyl))) +
      geom_point(size = 5)

 })  
  
}
shinyApp(ui, server)

왼쪽의 위젯을 클릭함에 따라 이에 맞게 테이블과 그림이 바뀝니다.

※ 실무에서는 위젯의 입력값인 4, 6, 8도 손으로 입력하는 방식이 아닌 데이터가 바뀔 때 마다 이에 맞게 자동으로 바뀌는 방법을 사용합니다.

3.5 반응 격리(isolating) 하기

앞서 ui에서 입력된 값에 따라 반응형으로 변하는 앱을 만들었습니다. 그러나 데이터가 매우 클 경우 위젯값을 바꿀때마다 이에 반응한다면 시간도 오래 걸리며, 불필요한 작업이 계속 돌아가게 됩니다.

예를 들어 실린더가 4, 6, 8인 데이터를 분석하고자 합시다. 기본적으로 4가 선택된 상태에서 6을 선택하면 이에 맞게 계산이 되고 결과가 출력됩니다. 이러한 작업이 진행되는 와중 8을 선택하면 또 이에 맞게 계산이 되고 결과가 출력됩니다. 그러나 실무에서는 분석하고자 하는 항목이 작게는 몇개, 많게는 수십게 이므로 매번 선택을 변경할 때 마다 작업이 돌아갈 경우 상당한 리소스를 잡아먹습니다. 결과적으로 우리가 원하는 결과가 [4, 6, 8]을 선택한 것일 경우 값을 모두 선택한 후 [실행] 버튼을 누르면 그제서야 계산이 되는 것이 훨씬 효율적입니다. 이를 ’반응 격리’라 합니다. 해당 작업에는 대표적으로 eventReactive() 함수가 사용됩니다. 이는 input값의 변경에 즉시 반응하는 것이 아닌 반응을 지연시키는 함수로써, 특정 동작이 발생했을 때 변경된 사항에 반응을 시킵니다.

library(shiny)
library(DT)
library(ggplot2)
library(dplyr)
library(magrittr)

ui = fluidPage(
  
  titlePanel("mtcars"),
  sidebarLayout(
    
    sidebarPanel(
      checkboxGroupInput("cyl", label = '실린더를 선택하세요',
                     choices = mtcars[['cyl']] %>% unique() %>% sort(),
                     selected = mtcars[['cyl']] %>% unique() %>% sort() %>% .[1]),
      
      actionButton('go', label = '분석을 실행하세요!')
      
      ),
    
    mainPanel(
      dataTableOutput('mtcars_table'),
      plotOutput('mtcars_plot')
    )
    )
)

server = function(input, output, session) {
  
  sel_mtcars = eventReactive(input$go, {
    mtcars %>%
      select(mpg, cyl, wt) %>%
      filter(cyl %in% input$cyl)
  })
  
  output$mtcars_table = renderDataTable({
    
    sel_mtcars() %>%
      datatable()
  })
  
  output$mtcars_plot = renderPlot({
    
    sel_mtcars() %>%
      ggplot(aes(x = mpg, y = wt, color = factor(cyl))) +
      geom_point(size = 5)
  })  
}

shinyApp(ui, server)

먼저 ui에서는 동작을 입력하기 위해 actionButton()을 통한 버튼을 만듭니다. server에서는 eventReactive() 함수 내에 input$go가 실행되었을 때, 즉 액션버튼이 클릭되었을 때 수행될 동작을 입력합니다. 앱을 실행해보면 해당 버튼을 클릭해야만 동작이 실행되어 테이블과 그래프가 출력됩니다.

실무에서는 사이드바에 여러 입력값을 넣은 후 액션버튼을 클릭할 경우, 이에 맞게 sql에 쿼리를 날려 해당하는 데이터를 받아오도록 설계하기도 합니다.

3.6 tidy evaluation

Shiny 내에서 tidyverse(ggplot2, dplyr) 패키지를 이용할 경우 원하는 대로 앱이 구현되지 않을수도 있습니다. 이는 R의 기본 문법과 tidyverse에서의 문법이 다르기 때문입니다. 아래의 예제를 살펴봅시다.

library(shiny)

num_vars =  c("carat", "depth", "table", "price", "x", "y", "z")

ui = fluidPage(
  selectInput("var", "Variable", choices = num_vars),
  numericInput("min", "Minimum", value = 1),
  tableOutput("output")
)

server = function(input, output, session) {
  data = reactive(diamonds %>% filter(input$var > input$min))
  output$output = renderTable(head(data()))
}

shinyApp(ui, server)

input$var에는 열 이름이, input$min에는 값이 들어가게 됩니다. 즉, reactive() 내에서는 filter() 함수를 통해 해당 열의 값이 특정 값보다 크다는 조건을 만족하는 데이터만 선택하도록 하였습니다. 그러나 결과를 살펴보면 carat이 1보다 작은 데이터도 모두 선택되었습니다.

dplyr 문법에서 carat이 1보다 큰 데이터를 선택하는 코드는 다음과 같습니다.

diamonds %>% filter(carat >= 1)

## # A tibble: 19,060 x 10
##    carat cut       color clarity depth table price     x     y     z
##    <dbl> <ord>     <ord> <ord>   <dbl> <dbl> <int> <dbl> <dbl> <dbl>
##  1  1.17 Very Good J     I1       60.2    61  2774  6.83  6.9   4.13
##  2  1.01 Premium   F     I1       61.8    60  2781  6.39  6.36  3.94
##  3  1.01 Fair      E     I1       64.5    58  2788  6.29  6.21  4.03
##  4  1.01 Premium   H     SI2      62.7    59  2788  6.31  6.22  3.93
##  5  1.05 Very Good J     SI2      63.2    56  2789  6.49  6.45  4.09
##  6  1.05 Fair      J     SI2      65.8    59  2789  6.41  6.27  4.18
##  7  1    Premium   I     SI2      58.2    60  2795  6.61  6.55  3.83
##  8  1.01 Fair      E     SI2      67.4    60  2797  6.19  6.05  4.13
##  9  1.04 Premium   G     I1       62.2    58  2801  6.46  6.41  4   
## 10  1    Premium   J     SI2      62.3    58  2801  6.45  6.34  3.98
## # ... with 19,050 more rows

그러나 shiny의 input을 통해 변수를 받을 경우 input$var는 ’caret’이 됩니다. 따라서 다음과 같이 코드가 실행되어 제대로된 결과가 나타나지 않습니다.

diamonds %>% filter('carat' >= 1)

## # A tibble: 53,940 x 10
##    carat cut       color clarity depth table price     x     y     z
##    <dbl> <ord>     <ord> <ord>   <dbl> <dbl> <int> <dbl> <dbl> <dbl>
##  1  0.23 Ideal     E     SI2      61.5    55   326  3.95  3.98  2.43
##  2  0.21 Premium   E     SI1      59.8    61   326  3.89  3.84  2.31
##  3  0.23 Good      E     VS1      56.9    65   327  4.05  4.07  2.31
##  4  0.29 Premium   I     VS2      62.4    58   334  4.2   4.23  2.63
##  5  0.31 Good      J     SI2      63.3    58   335  4.34  4.35  2.75
##  6  0.24 Very Good J     VVS2     62.8    57   336  3.94  3.96  2.48
##  7  0.24 Very Good I     VVS1     62.3    57   336  3.95  3.98  2.47
##  8  0.26 Very Good H     SI1      61.9    55   337  4.07  4.11  2.53
##  9  0.22 Fair      E     VS2      65.1    61   337  3.87  3.78  2.49
## 10  0.23 Very Good H     VS1      59.4    61   338  4     4.05  2.39
## # ... with 53,930 more rows

tidyverse에서는 열 이름에 해당하는 부분에 따옴표(’’)를 입력하지 않아도 되지만, input으로 값을 받아올 경우 문자열로 인식되어 따옴표가 붙어 발생하는 문제입니다. 먼저 dplyr에서 우리가 원한느 데이터를 선택하는 법은 다음과 같습니다.

min = 1
diamonds %>% filter(carat > min)

## # A tibble: 17,502 x 10
##    carat cut       color clarity depth table price     x     y     z
##    <dbl> <ord>     <ord> <ord>   <dbl> <dbl> <int> <dbl> <dbl> <dbl>
##  1  1.17 Very Good J     I1       60.2    61  2774  6.83  6.9   4.13
##  2  1.01 Premium   F     I1       61.8    60  2781  6.39  6.36  3.94
##  3  1.01 Fair      E     I1       64.5    58  2788  6.29  6.21  4.03
##  4  1.01 Premium   H     SI2      62.7    59  2788  6.31  6.22  3.93
##  5  1.05 Very Good J     SI2      63.2    56  2789  6.49  6.45  4.09
##  6  1.05 Fair      J     SI2      65.8    59  2789  6.41  6.27  4.18
##  7  1.01 Fair      E     SI2      67.4    60  2797  6.19  6.05  4.13
##  8  1.04 Premium   G     I1       62.2    58  2801  6.46  6.41  4   
##  9  1.2  Fair      F     I1       64.6    56  2809  6.73  6.66  4.33
## 10  1.02 Premium   G     I1       60.3    58  2815  6.55  6.5   3.94
## # ... with 17,492 more rows

이를 R의 기본문법으로 나타내면 다음과 같습니다.

min = 1
diamonds[diamonds$carat > min, ]

## # A tibble: 17,502 x 10
##    carat cut       color clarity depth table price     x     y     z
##    <dbl> <ord>     <ord> <ord>   <dbl> <dbl> <int> <dbl> <dbl> <dbl>
##  1  1.17 Very Good J     I1       60.2    61  2774  6.83  6.9   4.13
##  2  1.01 Premium   F     I1       61.8    60  2781  6.39  6.36  3.94
##  3  1.01 Fair      E     I1       64.5    58  2788  6.29  6.21  4.03
##  4  1.01 Premium   H     SI2      62.7    59  2788  6.31  6.22  3.93
##  5  1.05 Very Good J     SI2      63.2    56  2789  6.49  6.45  4.09
##  6  1.05 Fair      J     SI2      65.8    59  2789  6.41  6.27  4.18
##  7  1.01 Fair      E     SI2      67.4    60  2797  6.19  6.05  4.13
##  8  1.04 Premium   G     I1       62.2    58  2801  6.46  6.41  4   
##  9  1.2  Fair      F     I1       64.6    56  2809  6.73  6.66  4.33
## 10  1.02 Premium   G     I1       60.3    58  2815  6.55  6.5   3.94
## # ... with 17,492 more rows

기본 문법에서도 ‘$열이름’ 형태로 입력하면 따옴표를 붙이지 않아도 인식이 됩니다.

var = "carat"
diamonds[diamonds[[var]] > min, ]

## # A tibble: 17,502 x 10
##    carat cut       color clarity depth table price     x     y     z
##    <dbl> <ord>     <ord> <ord>   <dbl> <dbl> <int> <dbl> <dbl> <dbl>
##  1  1.17 Very Good J     I1       60.2    61  2774  6.83  6.9   4.13
##  2  1.01 Premium   F     I1       61.8    60  2781  6.39  6.36  3.94
##  3  1.01 Fair      E     I1       64.5    58  2788  6.29  6.21  4.03
##  4  1.01 Premium   H     SI2      62.7    59  2788  6.31  6.22  3.93
##  5  1.05 Very Good J     SI2      63.2    56  2789  6.49  6.45  4.09
##  6  1.05 Fair      J     SI2      65.8    59  2789  6.41  6.27  4.18
##  7  1.01 Fair      E     SI2      67.4    60  2797  6.19  6.05  4.13
##  8  1.04 Premium   G     I1       62.2    58  2801  6.46  6.41  4   
##  9  1.2  Fair      F     I1       64.6    56  2809  6.73  6.66  4.33
## 10  1.02 Premium   G     I1       60.3    58  2815  6.55  6.5   3.94
## # ... with 17,492 more rows

만일 따옴표가 붙을 경우, $ 대신 [[를 사용하면 동일한 결과를 얻을 수 있습니다. 이를 dplyr 문법에 적용해보도록 합시다.

min = 1
diamonds %>% filter(.data$carat > .env$min)

## # A tibble: 17,502 x 10
##    carat cut       color clarity depth table price     x     y     z
##    <dbl> <ord>     <ord> <ord>   <dbl> <dbl> <int> <dbl> <dbl> <dbl>
##  1  1.17 Very Good J     I1       60.2    61  2774  6.83  6.9   4.13
##  2  1.01 Premium   F     I1       61.8    60  2781  6.39  6.36  3.94
##  3  1.01 Fair      E     I1       64.5    58  2788  6.29  6.21  4.03
##  4  1.01 Premium   H     SI2      62.7    59  2788  6.31  6.22  3.93
##  5  1.05 Very Good J     SI2      63.2    56  2789  6.49  6.45  4.09
##  6  1.05 Fair      J     SI2      65.8    59  2789  6.41  6.27  4.18
##  7  1.01 Fair      E     SI2      67.4    60  2797  6.19  6.05  4.13
##  8  1.04 Premium   G     I1       62.2    58  2801  6.46  6.41  4   
##  9  1.2  Fair      F     I1       64.6    56  2809  6.73  6.66  4.33
## 10  1.02 Premium   G     I1       60.3    58  2815  6.55  6.5   3.94
## # ... with 17,492 more rows

’.data’는 데이터프레임에서 data-variables 부분을, .env는 환경(environment)에서 env-variables 부분을 의미합니다. (https://search.r-project.org/CRAN/refmans/rlang/html/dot-data.html)

만일 열 이름을 문자열로 입력할 경우 dplyr에서 다음과 같이 입력하면 됩니다.

var = 'carat'
diamonds %>% filter(.data[[var]] > .env$min)

## # A tibble: 17,502 x 10
##    carat cut       color clarity depth table price     x     y     z
##    <dbl> <ord>     <ord> <ord>   <dbl> <dbl> <int> <dbl> <dbl> <dbl>
##  1  1.17 Very Good J     I1       60.2    61  2774  6.83  6.9   4.13
##  2  1.01 Premium   F     I1       61.8    60  2781  6.39  6.36  3.94
##  3  1.01 Fair      E     I1       64.5    58  2788  6.29  6.21  4.03
##  4  1.01 Premium   H     SI2      62.7    59  2788  6.31  6.22  3.93
##  5  1.05 Very Good J     SI2      63.2    56  2789  6.49  6.45  4.09
##  6  1.05 Fair      J     SI2      65.8    59  2789  6.41  6.27  4.18
##  7  1.01 Fair      E     SI2      67.4    60  2797  6.19  6.05  4.13
##  8  1.04 Premium   G     I1       62.2    58  2801  6.46  6.41  4   
##  9  1.2  Fair      F     I1       64.6    56  2809  6.73  6.66  4.33
## 10  1.02 Premium   G     I1       60.3    58  2815  6.55  6.5   3.94
## # ... with 17,492 more rows

Shiny의 input을 통해 받은 입력값을 var와 min 부분에 대입하면 우리가 원하는 필터 기능이 수행됩니다.

num_vars <- c("carat", "depth", "table", "price", "x", "y", "z")

ui <- fluidPage(
  selectInput("var", "Variable", choices = num_vars),
  numericInput("min", "Minimum", value = 1),
  tableOutput("output")
)

server <- function(input, output, session) {
  data <- reactive(diamonds %>% filter(.data[[input$var]] > .env$input$min))
  output$output <- renderTable(head(data()))
}

shinyApp(ui, server)

이처럼 Shiny widget을 통해 받은 input 값을 dplyr 문법에 적용할 때는 .data와 .env를 이용해야 제대로 된 결과를 출력할 수 있습니다. 이는 ggplot을 통한 시각화에도 그대로 적용됩니다. iris 데이터를 시각화하는 법은 다음과 같습니다.

library(ggplot2)

iris %>%
  ggplot(aes(x = Sepal.Length, y = Sepal.Width)) +
  geom_point()

aes() 내의 x와 y부분에 열이름을 입력하며, 따옴표를 붙이지 않은 상태로 입력해야 합니다. 이를 shiny에 적용하면 다음과 같습니다.

ui = fluidPage(
  selectInput("x", "X variable", choices = names(iris)),
  selectInput("y", "Y variable", choices = names(iris)),
  plotOutput("plot")
)

server = function(input, output, session) {
  output$plot = renderPlot({
    ggplot(iris, aes(input$x, input$y)) +
      geom_point()
    })
}

shinyApp(ui, server)

코드대로라면 위젯에서 선택하는 열에 맞춰 x축과 y축이 변경되어야 하지만 제대로 작동하지 않습니다. 이는 위젯에서 선택된 값이 문자열로 인식되어, aes() 내에도 문자열로 입력되기 때문입니다. 이 역시 위의 dplyr 케이스와 마찬가지로 .data와 .env를 이용하면 우리가 원하는 앱을 구현할 수 있습니다.

ui = fluidPage(
  selectInput("x", "X variable", choices = names(iris)),
  selectInput("y", "Y variable", choices = names(iris)),
  plotOutput("plot")
)

server = function(input, output, session) {
  output$plot = renderPlot({
    ggplot(iris, aes(.data[[input$x]], .data[[input$y]])) +
      geom_point()
    })
}

shinyApp(ui, server)

혹은 aes() 대신 aes_string() 함수를 이용할 경우 문자 형태를 그대로 입력해도 됩니다.

ui = fluidPage(
  selectInput("x", "X variable", choices = names(iris)),
  selectInput("y", "Y variable", choices = names(iris)),
  plotOutput("plot")
)

server = function(input, output, session) {
  output$plot = renderPlot({
    ggplot(iris, aes_string(input$x, input$y)) +
      geom_point()
    })
}

shinyApp(ui, server)

3.7 기타

library(shiny)
library(shinythemes)

ui = fluidPage(
    theme = shinytheme("superhero"),
    # shinythemes::themeSelector(),
    sidebarPanel(
      textInput("txt", "Text input:", "text here"),
      sliderInput("slider", "Slider input:", 1, 100, 30),
      actionButton("action", "Button"),
      actionButton("action2", "Button2", class = "btn-primary")
    ),
    mainPanel(
      tabsetPanel(
        tabPanel("Tab 1"),
        tabPanel("Tab 2")
      )
    )
  )

server = function(input, output, session) {

}

shinyApp(ui, server)

library(shiny)
library(bslib)

ui = fluidPage(
    theme = bs_theme(bootswatch = "minty"),
    sidebarPanel(
      textInput("txt", "Text input:", "text here"),
      sliderInput("slider", "Slider input:", 1, 100, 30),
      actionButton("action", "Button"),
      actionButton("action2", "Button2", class = "btn-primary")
    ),
    mainPanel(
      tabsetPanel(
        tabPanel("Tab 1"),
        tabPanel("Tab 2")
      )
    )
  )

server = function(input, output, session) {

}

shinyApp(ui, server)